<template>
    <div>
      <div style="width: 1380px; height: 400px; background-color: #ffffff"  id="main-eChartsProducts" ref="chart"></div>
    </div>
</template>

<script>
export default {
  name: "EchartLine",
  data(){
    return {
      legend:['新增用户','活跃用户','累积用户','管理员']
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie();
    });
  },
  methods: {
    drawPie() {
      console.log(this.$echarts)
      let start=new Date();
      let myCharts = this.$echarts.init(this.$refs.chart);
      let option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['新增用户','活跃用户','累积用户','管理员']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [new Date(start.setDate(new Date().getDate()-6)).format('yyyy-MM-dd'), new Date(start.setDate(new Date().getDate()-5)).format('yyyy-MM-dd'), new Date(start.setDate(new Date().getDate()-4)).format('yyyy-MM-dd'), new Date(start.setDate(new Date().getDate()-3)).format('yyyy-MM-dd'), '前天', '昨天', '今天']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '新增用户',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '活跃用户',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '累积用户',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '管理员',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          }
        ]
      };
      option &&myCharts.setOption(option);
    }
  }
}
</script>

<style scoped>

</style>